<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div class="cont">
        <div class="box2">
            <div class="box1">1</div>
            <div class="box4">2</div>
            <div class="box5">5</div>
        </div>
        <div class="box3">3</div>
    </div>
    <script>
        // document由节点构成 节点包含 元素标签 空格换行....
        // 节点 ：node  元素 ：element
        // 一、子关系；
        var box2 = document.querySelector(".box2");

        // 1.子节点：获取所有的子节点  元素.childNodes
        /*  var eles = box2.childNodes;
                              console.log(eles); */
        // 2.子元素: 获取所有的子元素 元素.children
        /*  console.log(box2.children); */

        // 3.获取到第一个子元素firstElementChild
        /*  document.onclick = function() {
                        console.log(box2.firstElementChild);
                    }; */

        // 4.获取第一个子节点firstChild
        document.onclick = function() {
            console.log(box2.firstChild);
        };

        // 5.获取最后一个子元素lastElementChild
        document.onclick = function() {
            console.log(box2.lastElementChild);
        };

        // 6.获取最后一个子节点lastChild
        document.onclick = function() {
            console.log(box2.lastChild);
        };
    </script>
    .
</body>

</html>